<template>
  <div class="yun_div">
    <div class="yun_div2">
      <!-- 头部 -->
      <div class="yun_top">
        状态：<input
          type="text"
          class="yun_input1"
          placeholder="请选择  状态"
        />

        <button class="yun_btn1">
          <i class="yun_btn1_i1"
            ><svg
              t="1675869699114"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5759"
              id="mx_n_1675869699115"
              width="15"
              height="15"
            >
              <path
                d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z"
                fill="#ffffff"
                p-id="5760"
              ></path>
              <path
                d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z"
                fill="#ffffff"
                p-id="5761"
              ></path></svg
          ></i>
          搜索
        </button>
        <button class="yun_btn2">
          <i class="yun_btn2_i2"
            ><svg
              t="1675867780399"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4669"
              width="15"
              height="15"
            >
              <path
                d="M928.16 144H736V64a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v80H95.84a32 32 0 0 0 0 64H129.6l77.92 698.656A96 96 0 0 0 302.912 992h418.144a96.032 96.032 0 0 0 95.424-85.344L894.4 208h33.728a32 32 0 0 0 0.032-64zM352 96h320v48H352V96z m400.896 803.552a32 32 0 0 1-31.808 28.448H302.912a32 32 0 0 1-31.808-28.448L193.984 208h636.032l-77.12 691.552z"
                p-id="4670"
              ></path>
              <path
                d="M608 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32zM432 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32z"
                p-id="4671"
              ></path></svg
          ></i>
          清空
        </button>
      </div>

      <!-- 按钮 -->
      <div class="yun_top2">
        <button class="yun_btn3">
          <i class="yun_btn3_i1"
            ><svg
              t="1675870437046"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6694"
              width="15"
              height="15"
            >
              <path
                d="M469.333333 469.333333V170.666667h85.333334v298.666666h298.666666v85.333334h-298.666666v298.666666h-85.333334v-298.666666H170.666667v-85.333334h298.666666z"
                fill="#ffffff"
                p-id="6695"
              ></path></svg
          ></i>
          新增
        </button>
        <button class="yun_btn4">批量删除</button>

        <p class="yun_top2_p1">
          当前表格已选择 <b>{{ check }}</b> 项 &ensp; <span>清空</span>
        </p>
      </div>

      <div class="yun_table">
        <!-- table表格 -->
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;轮播图片"
            width="400"
          >
            <template #default="scope"
              >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;{{
                scope.row.date
              }}</template
            >
          </el-table-column>
          <!-- <el-table-column property="name" label="Name" width="120" /> -->

          <el-table-column property="shun" label="顺序" show-overflow-tooltip>
          </el-table-column>

          <el-table-column property="zhuang" label="状态" show-overflow-tooltip>
          </el-table-column>

          <el-table-column
            property="address"
            label="&emsp;操作"
            show-overflow-tooltip
          >
            <button class="yun_table_btn1">
              <i
                ><svg
                  t="1675874308871"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7698"
                  width="13"
                  height="13"
                >
                  <path
                    d="M98 607.49v132.16h130.42l391.27-396.46-130.42-132.15L98 607.49z m619.5-429.5l-65.21-66.07c-18-18.24-47.2-18.24-65.2 0l-32.6 33.04 130.42 132.15 32.61-33.05c8.65-8.76 13.5-20.65 13.5-33.04-0.01-12.38-4.87-24.27-13.52-33.03zM98 833.1h830v93.44H98V833.1z m0 0"
                    p-id="7699"
                    fill="#ffffff"
                  ></path></svg
              ></i>
              修改</button
            >&emsp;
            <button class="yun_table_btn2">
              <i
                ><svg
                  t="1675874397981"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8711"
                  width="13"
                  height="13"
                >
                  <path
                    d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z"
                    fill="#ffffff"
                    p-id="8712"
                  ></path></svg
              ></i>
              删除
            </button>
          </el-table-column>
        </el-table>

        <div class="demo-pagination-block">
          <el-pagination
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="3"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>


  
  <script lang="ts" setup>
import { ref } from "vue";
import { ElTable } from "element-plus";
interface User {
  date: string;
  address: string;
  shun: string;
  zhuang: string;
}

const currentPage1 = ref(5);
const check = ref(0);
const currentPage2 = ref(5);
const currentPage3 = ref(5);
const currentPage4 = ref(4);
const pageSize2 = ref(100);
const pageSize3 = ref(100);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData: User[] = [
  {
    date: "图片",
    shun: "1",
    zhuang: "正常",
    address: "",
  },
  {
    date: "图片",
    shun: "10",
    zhuang: "正常",
    address: "",
  },
  {
    date: "图片",
    shun: "13",
    zhuang: "正常",
    address: "",
  },
];
</script>
  
  <style scoped>
.yun_div {
  width: 100%;
  height: 650px;
  background: rgb(241, 241, 241);
  padding-top: 20px;
}

.yun_div2 {
  width: 98%;
  height: 98%;
  margin-left: 15px;
  background: #fff;
  box-shadow: 3px 3px 15px #ccc;
  border-radius: 10px;
}

.yun_top {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding-left: 30px;
  font-size: 16px;
}

.yun_input1 {
  width: 200px;
  height: 25px;
  margin-right: 20px;
  border: solid 1px #ccc;
  margin-left: 10px;
  outline: none;
  margin-right: 150px;
  padding-left: 10px;
  border-radius: 10px;
}
.yun_input1::placeholder {
  color: #ccc;
}

.yun_btn1 {
  width: 70px;
  height: 30px;
  line-height: 30px;
  background: rgb(26, 152, 255);
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}

.yun_btn1_i1 {
  position: absolute;
  left: 5px;
  top: 3px;
}

.yun_btn2 {
  width: 70px;
  height: 30px;
  line-height: 30px;
  border: solid 1px #ccc;
  background: #fff;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}
.yun_btn2_i2 {
  position: absolute;
  left: 5px;
  top: 3px;
}

.yun_top2 {
  width: 100%;
  height: 80px;
  margin-bottom: 20px;
  padding-left: 20px;
}

.yun_btn3 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: rgb(26, 152, 255);
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 20px;
  position: relative;
}

.yun_btn3_i1 {
  position: absolute;
  left: 10px;
  top: 3px;
}

.yun_btn4 {
  width: 80px;
  height: 30px;
  line-height: 30px;
  background: pink;
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 10px;
  margin-right: 30px;
  position: relative;
}

.yun_top2_p1 {
  margin-top: 10px;
  width: 200px;
  height: 30px;
  background: rgb(196, 224, 255);
  text-align: center;
  line-height: 30px;
  color: rgb(95, 106, 255);
  font-size: 14px;
  border-radius: 7px;
  border: solid 1px rgb(61, 200, 255);
  cursor: pointer;
}

.yun_table {
  width: 100%;
  height: 480px;
  padding-left: 20px;
  overflow: auto;
  clear: both;
}
.yun_table {
  margin-left: 20px;
}
.yun_table_btn1 {
  width: 60px;
  height: 30px;
  background: rgb(120, 172, 252);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.yun_table_btn2 {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background: rgb(253, 112, 135);
  color: #fff;
  cursor: pointer;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-pagination-block {
  float: right;
  margin-right: 50px;
  margin-top: 40px;
}
</style>